<template>
    <div>
        <el-popover placement="right-start" :width="100" trigger="click">
            <template #reference>
                <div class="setup no-drag">
                    <svg t="1689402575827" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="960" width="25" height="25">
                        <path
                            d="M568.32 553.0624m-279.3472 0a279.3472 279.3472 0 1 0 558.6944 0 279.3472 279.3472 0 1 0-558.6944 0Z"
                            fill="#CFF6FF" p-id="961"></path>
                        <path
                            d="M563.2 954.2144H464.6912A88.9856 88.9856 0 0 1 375.808 865.28v-43.008a11.6736 11.6736 0 0 0-6.5024-10.6496 335.872 335.872 0 0 1-46.7456-27.0336 11.8272 11.8272 0 0 0-12.4928-0.256l-37.2224 21.504A88.9344 88.9344 0 0 1 151.296 773.12l-49.2544-85.2992a88.832 88.832 0 0 1 32.512-121.4464l37.0688-21.4016a12.1344 12.1344 0 0 0 5.9392-11.3152 333.42976 333.42976 0 0 1 0-53.6064 12.1344 12.1344 0 0 0-5.9392-11.3152l-37.0688-21.248a88.9856 88.9856 0 0 1-32.512-121.4464L151.2448 240.64a88.9856 88.9856 0 0 1 121.4976-32.5632l37.2224 21.504a11.8784 11.8784 0 0 0 12.544 0 337.4592 337.4592 0 0 1 46.7968-27.0336 11.6736 11.6736 0 0 0 6.5024-10.6496V148.48a88.9856 88.9856 0 0 1 88.8832-88.6784H563.2A88.9856 88.9856 0 0 1 652.1344 148.48v43.4176a11.776 11.776 0 0 0 6.5536 10.7008 338.8928 338.8928 0 0 1 46.08 26.8288 11.776 11.776 0 0 0 12.544 0.3072l40.448-22.9376a82.2272 82.2272 0 0 1 111.2064 27.8016 25.6 25.6 0 1 1-43.4688 27.0848 31.1808 31.1808 0 0 0-42.1376-10.5472l-40.192 23.1424a63.232 63.232 0 0 1-67.328-2.5088 282.0608 282.0608 0 0 0-39.2192-22.7328 63.2832 63.2832 0 0 1-35.84-56.9344V148.48a37.7344 37.7344 0 0 0-37.5808-37.4784H464.6912A37.7344 37.7344 0 0 0 427.008 148.48v43.0592a63.1296 63.1296 0 0 1-35.84 56.9344A285.7984 285.7984 0 0 0 351.5392 271.36a63.232 63.232 0 0 1-67.1744 2.4576l-37.2224-21.504A37.8368 37.8368 0 0 0 195.584 266.24l-49.2032 85.4016a37.6832 37.6832 0 0 0 13.7728 51.5072l37.0688 21.4016a63.5904 63.5904 0 0 1 31.3856 59.6992 280.23296 280.23296 0 0 0 0 45.5168 63.5904 63.5904 0 0 1-31.3856 59.6992l-37.0688 21.4016a37.6832 37.6832 0 0 0-13.7728 51.5072L195.6352 747.52a37.7344 37.7344 0 0 0 51.5072 13.824l37.2224-21.504a63.232 63.232 0 0 1 67.1744 2.4576 285.7984 285.7984 0 0 0 39.68 22.8864 63.1296 63.1296 0 0 1 35.84 56.9344V865.28a37.7344 37.7344 0 0 0 37.6832 37.6832H563.2a37.7344 37.7344 0 0 0 37.7344-37.6832v-43.4176a63.2832 63.2832 0 0 1 35.584-56.8832A287.0784 287.0784 0 0 0 675.84 742.4a63.1296 63.1296 0 0 1 67.2256-2.5088l37.6832 21.76a37.7344 37.7344 0 0 0 51.5072-13.824l49.2544-85.2992a37.7344 37.7344 0 0 0-13.824-51.5072L829.952 588.8a63.4368 63.4368 0 0 1-31.232-59.392c0.5632-7.424 0.8192-14.9504 0.8192-22.3744s0-15.0016-0.8192-22.4256A63.4368 63.4368 0 0 1 829.952 424.96l37.7856-21.8624a37.7344 37.7344 0 0 0 13.824-51.5072 25.6 25.6 0 0 1 44.3392-25.6 88.9856 88.9856 0 0 1-32.5632 121.4464l-37.7856 21.8624a11.9296 11.9296 0 0 0-5.9392 11.3152c0.6656 8.7552 0.9728 17.6128 0.9728 26.368s-0.3072 17.5616-0.9728 26.3168a12.032 12.032 0 0 0 5.9392 11.3664l37.7856 21.8112a88.9344 88.9344 0 0 1 32.5632 121.4464L876.6464 773.12a88.9856 88.9856 0 0 1-121.4464 32.5632l-37.6832-21.76a11.776 11.776 0 0 0-12.544 0.3072 340.3264 340.3264 0 0 1-46.3872 26.88 11.6736 11.6736 0 0 0-6.4512 10.6496v43.52A88.9856 88.9856 0 0 1 563.2 954.2144z"
                            fill="#474747" p-id="962"></path>
                        <path
                            d="M513.536 673.9968A167.0144 167.0144 0 1 1 680.5504 506.88a167.168 167.168 0 0 1-167.0144 167.1168z m0-282.7776A115.8144 115.8144 0 1 0 629.3504 506.88a115.8656 115.8656 0 0 0-115.8144-115.6608z"
                            fill="#1285EF" p-id="963"></path>
                    </svg>
                </div>
            </template>
            <ul>
                <li @click="logout">
                    <svg t="1706640165022" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3653" id="mx_n_1706640165024" width="15" height="15">
                        <path
                            d="M443.093333 622.506667a35.84 35.84 0 0 0 50.773334 50.773333l135.68-135.68a36.266667 36.266667 0 0 0 0-51.2l-135.68-135.68a35.84 35.84 0 0 0-50.773334 50.773333l74.24 74.24H36.053333a35.84 35.84 0 0 0 0 72.106667h481.28z"
                            fill="#5E5C5C" p-id="3654"></path>
                        <path
                            d="M983.68 312.746667a512 512 0 0 0-878.933333-110.506667 35.84 35.84 0 0 0 57.173333 42.666667 443.733333 443.733333 0 0 1 151.893333-128 439.466667 439.466667 0 0 1 509.44 84.053333A440.32 440.32 0 0 1 682.88 917.333333a440.746667 440.746667 0 0 1-369.92-12.8 444.586667 444.586667 0 0 1-151.893333-128 35.84 35.84 0 0 0-57.173334 42.666667 516.266667 516.266667 0 0 0 176.64 147.2A512 512 0 0 0 1024.213333 512a506.026667 506.026667 0 0 0-40.533333-199.253333z"
                            fill="#5E5C5C" p-id="3655"></path>
                    </svg>
                    <span>退出登陆</span>
                </li>
                <li @click="changeTheme">
                    <svg t="1706640242909" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6438" width="15" height="15">
                        <path
                            d="M508.586667 1022.293333C228.693333 1022.293333 0 793.6 0 512S228.693333 1.706667 508.586667 1.706667C786.773333 1.706667 1017.173333 204.8 1024 455.68c0 160.426667-129.706667 290.133333-286.72 290.133333h-100.693333c-42.666667 0-76.8 34.133333-76.8 76.8 0 20.48 10.24 37.546667 18.773333 51.2l1.706667 3.413334c11.946667 13.653333 18.773333 35.84 18.773333 54.613333 0 51.2-39.253333 90.453333-90.453333 90.453333z m0-935.253333C274.773333 87.04 85.333333 276.48 85.333333 512s189.44 424.96 423.253334 424.96c3.413333 0 5.12-3.413333 5.12-5.12v-1.706667l-5.12-6.826666c-10.24-13.653333-35.84-49.493333-35.84-100.693334 0-88.746667 73.386667-162.133333 162.133333-162.133333h100.693333c110.933333 0 201.386667-92.16 201.386667-203.093333-3.413333-204.8-196.266667-370.346667-428.373333-370.346667z"
                            p-id="6439" fill="#5E5C5C"></path>
                        <path
                            d="M247.466667 375.466667c-44.373333 0-81.92 35.84-81.92 81.92 0 44.373333 35.84 81.92 81.92 81.92s81.92-35.84 81.92-81.92c0-46.08-35.84-81.92-81.92-81.92zM392.533333 191.146667c-44.373333 0-81.92 35.84-81.92 81.92s35.84 81.92 81.92 81.92 81.92-35.84 81.92-81.92-37.546667-81.92-81.92-81.92zM631.466667 191.146667c-44.373333 0-81.92 35.84-81.92 81.92s35.84 81.92 81.92 81.92c44.373333 0 81.92-35.84 81.92-81.92s-35.84-81.92-81.92-81.92zM776.533333 375.466667c-44.373333 0-81.92 35.84-81.92 81.92 0 44.373333 35.84 81.92 81.92 81.92s81.92-35.84 81.92-81.92c-1.706667-46.08-37.546667-81.92-81.92-81.92z"
                            p-id="6440" fill="#5E5C5C"></path>
                    </svg>
                    <span>主题切换</span>
                </li>
                <li @click="aboutWaiFChat">
                    <svg t="1706640373965" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="10683" width="15" height="15">
                        <path
                            d="M512 960c-246.784 0-448-201.216-448-448S265.216 64 512 64s448 201.216 448 448-201.216 448-448 448z m0-834.56c-212.992 0-386.56 173.568-386.56 386.56s173.568 386.56 386.56 386.56 386.56-173.568 386.56-386.56-173.568-386.56-386.56-386.56z"
                            p-id="10684" fill="#5E5C5C"></path>
                        <path
                            d="M554.496 246.784c29.696 7.168 44.032 41.984 37.376 71.68-7.168 29.696-34.816 54.784-64.512 47.616-29.696-7.168-40.96-41.472-34.304-71.168 7.168-29.696 31.744-55.296 61.44-48.128zM427.008 466.432s89.6-78.336 124.416-62.976c23.552 6.144 10.752 112.128 7.168 126.464-1.024 12.8-21.504 174.08-16.384 181.248 7.168 26.624 15.36 5.632 40.448-15.36 0 0 58.88-39.936-4.096 43.008-52.224 55.808-102.912 48.64-110.592 6.656-6.144-31.744 18.944-223.744 25.088-266.752 2.048-14.336-15.872 0-15.872 0s-48.64 30.208-60.416 9.728c-3.072-5.632 1.536-14.336 10.24-22.016z"
                            p-id="10685" fill="#5E5C5C"></path>
                    </svg>
                    <span>关于</span>
                </li>
            </ul>
        </el-popover>
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import { useRouter } from "vue-router"
import { useUserInfoStore } from "@/store/modules/user"
const { ipcRenderer } = require('electron')
const $router = useRouter()
const userInfoStore = useUserInfoStore()
const { proxy } = getCurrentInstance() as any

// 退出登陆
const logout = () => {
    // 断开socket
    proxy.socket.emit('logout', userInfoStore.userInfo._id)
    // 清空pinia
    userInfoStore.logout()
    // 清空本地存储
    localStorage.removeItem("userInfo")
    localStorage.removeItem("emojiHistory")
    localStorage.removeItem("modelConfig")
    // 退出登陆, 关闭所有子窗口
    ipcRenderer.send('logout')
    // 清空历史emoji
    $router.push("/login")
}

// 主题切换
const changeTheme = () => {
    let html = document.querySelector('html')
    let currentTheme = html!.getAttribute('data-theme')
    if (currentTheme === "light") {
        html!.setAttribute('data-theme', 'dark')
        localStorage.setItem('theme', 'dark')
    } else {
        html!.setAttribute('data-theme', 'light')
        localStorage.setItem('theme', 'light')
    }
}

// 关于
const aboutWaiFChat = () => {
    ipcRenderer.send('open-about')
}
</script>

<style lang="scss" scoped>
ul {
    padding: 5px;

    li {
        width: 100%;
        height: 30px;
        display: flex;
        padding: 0 10px;
        align-items: center;

        &:hover {
            background-color: #eeeeee;
        }

        span {
            margin-left: 7.5px;
        }
    }
}
</style>